<!-- 页面头部 -->
<template>
  <div class="w_1000">
    <div class="logo">
        <img src="../assets/logo/logo.png" alt="logo">
    </div>
    <el-row>
        <div class="toolbar">
          <el-col :span="3">
            <router-link tag="div" to="/Index">
              <div class="toolbar-item" :class="active">
                首页
              </div>
            </router-link>
          </el-col>

          <el-col :span="3">
            <router-link tag="div" to="/Dailyessays">
              <div class="toolbar-item">
                日常随笔
              </div>
            </router-link>
          </el-col>

          <el-col :span="3">
            <router-link tag="div" to="/Driedgoods">
              <div class="toolbar-item">
                干货集锦
              </div>
            </router-link>
          </el-col>

          <el-col :span="3">
            <router-link tag="div" to="/Artscenter">
              <div class="toolbar-item">
                艺术殿堂
              </div>
            </router-link>
          </el-col>

          <el-col :span="3">
            <router-link tag="div" to="/Hotnews">
              <div class="toolbar-item">
                热点新闻
              </div>
            </router-link>
          </el-col>

          <el-col :span="3">
            <router-link tag="div" to="/Healthyhome">
              <div class="toolbar-item">
                健康之家
              </div>
            </router-link>
          </el-col>

          <el-col :span="3">
            <router-link tag="div" to="/Laughterworld">
              <div class="toolbar-item">
                欢笑天地
              </div>
            </router-link>
          </el-col>

          <el-col :span="3">
            <router-link tag="div" to="/Socialscience">
              <div class="toolbar-item">
                人文社科
              </div>
            </router-link>
          </el-col>
          
        </div>
    </el-row>
  </div>
</template>

<script>
import store from '@/store/modules/webnav/index';

export default {
  data() {
    return {
      active:''
    };
  },
  store,
  mounted() {
    //一级标题数据
      let path=this.$route.path;
      this.$store.commit('toRightLinkpath',path);
      if(path=='/'||path=='/Index'){
        this.active='headeractive';
      }
      else{
        this.active='';
      }
  }
};
</script>
<style scoped>
.logo {
  padding: 20px 0;
}
.logo img {
  height: 70px;
  width: auto;
}
.toolbar {
  line-height: 45px;
  height: 45px;
  background-color: #fb5403;
}
.toolbar-item,
a {
  color: #fff;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.active,
.toolbar-item:hover {
  color: #fff;
  background-color: #c14102;
}
</style>